<template>
  <div class="widget-container">
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel key="1" header="基础题型">
        <WidgetGroup :fields="basicFields" 
        v-model:list="antd.basicComponents"
         />
      </a-collapse-panel>
      <a-collapse-panel key="2" header="其他说明" >
        <p>长按任意表单项即可进行排序</p>
        <p>如果你已有题库json文件，可直接导入并可编辑然后发布</p>
      
        
      </a-collapse-panel>
    </a-collapse>

  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { PropType } from 'vue'
// 导入表单配置
import { antd } from './config/index'
import WidgetGroup from './WidgetGroup.vue'
// 需要接受子组件更新双向绑定的list数据
// const widgetFormItems = ref([...antd.widgetForm.list])
const props = defineProps(
  {
    basicFields: {
      type: Array as PropType<Array<string>>,
      default: () => [
        'input',
        'password',
        'textarea',
        'number',
        'radio',
        'checkbox',
        'time',
        'date',
        'rate',
        'select',
        'switch',
        'slider',
        'text'
      ]
    },
  }
)
const _ = props
const activeKey = ref(['1'])

watch(activeKey, val => {
  console.log(val);
})

</script>

<style scoped lang="less">

</style>